Left Nav Page Style

The Style Guide offers a standard side navigation that accommodates three levels of navigation through expanding menu labels. To keep the navigation simple and intuitive, it is recommend you try to use the minimum number of levels possible by “flattening” your Information Architecture whenever possible. This practice opens more content sections at the root level — thus presenting users with more main navigation tabs, and fewer clicks within each section..

For mobile, the side navigation will nest itself inside the page's main navigation.

IMF side navigation contains a left subnavigation list, constructed with Bootstrap collapsible panels. PE Interface down arrow icons are used.

IMF Subnavigation requires the following: External:

• jQuery 2.2.2
• Hind and Roboto Google Fonts
• Bootstrap CSS and Bootstrap JS

Internal

• Pe Icon Interface Fonts and CSS (resides in the fonts folder
• IMF_Typography.css
• IMF_Subnavigation.css
• IMF_Subnavigation.js

IMPORTANT: Because of the CSS styling included in this component, wrap list items in anchor tags, even if it is not a link (just remove the href attribute). Otherwise, the list item WILL NOT STYLE PROPERLY